<template>
  <view class="bill" :style="'background-color: #f7f7f7;color:#333333;'+'min-height:'+$xyfun.xysys().windowHeight+'px'">
    <block v-if="!isLoading">
      <view class="bill-list" v-if="!isEmpty">
        <view class="item m-b-20 flex fx-column p-30" @click="onLink(item)" v-for="item in dataList" :key="item.id">
          <view class="top">
            <view class="l">订单号：{{item.order_sn}}</view>
            <view class="r">
              {{item.status_text}}
              <text class="yz-iconfont yz-jiantou3 m-l-5"></text>
            </view>
          </view>
          <view class="p-20 flex just-sb" v-for="(val,idx) in item.item">
            <view class="l">
              <image style="height: 135rpx;width: 202rpx;" :src="val.goods_image" class="br-10" />
            </view>
            <view class="m m-l-20 fx-grow">
              <view class="tb lh-40 ts-26">{{val.goods_title}}</view>
            </view>
            <view class="r tr">
              <text>￥</text>
              <text class="ts-26">{{ val.goods_price }}</text>
              <view class="m-l-auto">x{{ val.buy_num }}</view>
            </view>
          </view>
          <view class="other">
            <view class="l ts-24 flex ali-cen">
              <view class="flex ali-cen m-t-10">
                <image class="avatar-40 m-r-10" :src="item.user.avatar"></image>
                <text class="ts-24" style="color: #797979;">{{item.user.nickname}}</text>
              </view>
            </view>
            <view class="r ts-24">
              实际支付：<text class="tc-r tb ts-32">{{item.total_fee}}</text>
            </view>
          </view>
        </view>
      </view>
      <view v-else>
        <xy-empty text="暂无数据" />
      </view>
    </block>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import xyEmpty from '@/components/xy-empty';
export default {
  components: {
    xyEmpty,
  },
  data() {
    return {

      isLoading:true,
      isEmpty: true,
      dataList: [],
      currentPage: 1,
      lastPage: 1,
      loadStatus: 'loadmore',
    }
  },
  computed: {
    ...mapState(['common'])
  },
  async onLoad() {

    this.loadData();
  },
  onPullDownRefresh() {
    this.currentPage = 1;
    this.dataList = [];
    this.loadData();
  },
  onReachBottom() {
    if(this.currentPage < this.lastPage) {
      this.currentPage += 1;
      this.loadData();
    }
  },
  methods: {
    async loadData(){

      this.$api.post({
        url: '/take/bill',
        loadingTip:'加载中...',
        data: {
          page: this.currentPage,
        },
        success: res => {
          uni.stopPullDownRefresh();
          this.isLoading = false;
          this.dataList = [...this.dataList, ...res.data];
          this.isEmpty = !this.dataList.length;
          this.currentPage = res.current_page;
          this.lastPage = res.last_page;
          this.loadStatus = this.currentPage < res.last_page ? 'loadmore' : 'nomore';
        }
      });
    },

    onLink(item){
      this.$xyfun.to('/pages/user/order/detail?id='+item.id);
    }

  }
}
</script>

<style>
page{
  background: #ececec;
}
</style>
<style lang="scss">
.bill-list{
  padding: 20rpx;
  .item{
    background: #fff;
    margin: 20rpx;
    .top{
      display: flex;
      justify-content: space-between;
      font-size: 26rpx;
      border-bottom: 1rpx solid #ececec;
      padding: 20rpx;
    }
    .other{
      display: flex;
      justify-content: space-between;
      padding: 14rpx 15rpx;
      border-top: 1rpx solid #f2f2f2;
    }
  }
}
</style>
